<template>
  <div id="backgroundColor">
    <div id="whiteBackground">
      <div class="right">
        <div class="showTitle">
          <img id="titleIco" src="./img/title.png" />
          <h2>确认订单</h2>
        </div>
        <div id="processImg">
          <img id="processPng" src="./img/process.png" />
          <hr />
        </div>
        <div id="searveDetail">
          <h4>确认服务时间</h4>
          <el-date-picker v-model="this.orderMsg.serverTime" value-format="YYYY-MM-DD hh:mm:ss" type="datetime"
            placeholder="选择服务时间" />
          <h4>确认订单信息</h4>
          <div id="choseMsg" class="statusMsg">
            <span>家政人员:</span>
            <input disabled :value="this.orderMsg.nickName" class="theIn" type="text" />

            <span class="rightSpan">分类范围:</span>
            <input disabled :value="this.orderMsg.categoryName" class="theIn" type="text" />
            <br />
            <span>联系方式:</span>
            <input disabled :value="this.orderMsg.phoneNumber" class="theIn" type="text" />
            <span class="rightSpan">聘请类别:</span>
            <input disabled :value="this.orderMsg.serverType" class="theIn" type="text" />
            <br />
            <span id="totalPrice" class="rightSpan">总价:</span>
            <input id="priceIn" disabled :value="this.orderMsg.salary" class="theIn" type="text" />

            <br />
            <span id="note">备注：</span>
            <textarea placeholder="选填，给家政人员留言，如上门前请先联系" v-model="this.orderMsg.note"></textarea>
          </div>
          <h4>选择支付方式</h4>
          <input v-model="modeOfPay" value="Alipay" type="radio" />
          <img id="alipayImg" src="./img/alipay.png" />
          <input @click="pay" type="button" value="支付" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { generatePayCode } from "@/api";
import { getCookie, delCookie } from "@/util/cookie.js";

export default {
  name: "ConfirmOrder",
  computed: {
    ...mapState("LoginStore", ["tokenStore"]),
  },
  data() {
    return {
      //支付方式
      modeOfPay: "Alipay",
      orderMsg: [
        {
          nickName: "",
          categoryName: "",
          phoneNumber: "",
          serverType: "",
          salary: null,
          serverTime: "",
          note: "",
        },
      ],
    };
  },
  created() {
    if (getCookie('serverId')) {
      this.orderMsg.nickName = getCookie("nickName");
      this.orderMsg.categoryName = getCookie("categoryName");
      this.orderMsg.phoneNumber = getCookie("phoneNumber");
      this.orderMsg.serverType = getCookie("serverType");
      this.orderMsg.salary = getCookie("salary");
    }else{
      if (confirm('信息过期，请重新操作！')) {
        this.$router.go(-1)
      }
    }
  },
  methods: {
    pay() {
      //格式验证
      if (this.orderMsg.serverTime == undefined) {
        alert("请填写服务时间");
      } else if (this.orderMsg.note == undefined) {
        this.orderMsg.note = "";
      } else {
        const parmas = {
          userId: getCookie("userId"),
          serverId: getCookie("serverId"),
          totalPrice: getCookie("salary"),
          description: this.orderMsg.note,
          server_time: this.orderMsg.serverTime,
        };
        delCookie('serverId')
        delCookie('nickName')
        delCookie('categoryName')
        delCookie('phoneNumber')
        delCookie('serverType')
        delCookie('salary')
        generatePayCode(parmas).then((response) => {
          if (response.data.code === 200) {
            const url =
              "http://81.71.3.215:7777/user/pay/requestPay?payNo=" +
              response.data.data.payNo;
            window.open(url);
            this.$router.go(-1)
          }
        });
      }
    },
  },
};
</script>

<style scoped>
#backgroundColor {
  background-color: rgb(237, 244, 237);
  width: 100%;
  height: 100%;
  padding-top: 4rem;
  padding-bottom: 3rem;
}

/* //白色背景 */
#whiteBackground {
  background-color: white;
  width: 72rem;
  height: 61rem;
  margin: 0 auto;
  border-radius: 1rem;
  padding-top: 0.2rem;
  margin-top: 3rem;
}

.right {
  text-align: left;
  width: 68rem;
  height: 52rem;
  background-color: rgb(255, 255, 255);
  border: 1px solid gray;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 3rem;
  padding-bottom: 3rem;
}

.showTitle {
  position: relative;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid rgb(165, 162, 162);
  box-sizing: border-box;
  text-align: start;
  padding-left: 2rem;
}

.showTitle h2 {
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
  vertical-align: middle;
}

.showTitle #titleIco {
  display: inline-block;
  width: 1.7rem;
  height: auto;
  text-align: left;
  vertical-align: middle;
}

#processImg {
  text-align: center;
}

#processPng {
  width: 94%;
  height: auto;
}

/* 服务时间 */
#searveDetail h4 {
  margin-left: 2rem;
  font-size: 1.3rem;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: revert;
  height: var(--el-input-height, var(--el-component-size));
  margin-left: 4rem;
}

/* 表格 */
#serveArea {
  margin-bottom: 2rem;
}

#tipsMsg {
  transition: all 0.4s ease;
  display: none;
  height: auto;
  padding-left: 2rem;
  padding-bottom: 1rem;
  padding-top: 1.5rem;
}

#arrow {
  padding-left: 46rem !important;
}

/* 填写信息样式
 */
#choseMsg {
  width: 90%;
  border: 1px solid rgb(112, 110, 110);
  border-radius: 2rem;
  text-align: start;
  margin: 0 auto;
  margin-top: 2rem;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
}

#choseMsg span {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  padding-right: 1rem;
  margin-top: 1rem;
}

#choseMsg select {
  width: 7rem;
  height: 1.7em;
  font-size: 1rem;
  margin-top: 1rem;
  margin-right: 3rem;
}

#choseMsg .theIn {
  font-size: 1.1rem;
  width: 21rem;
  height: 1.6rem;
  border: none;
}

#choseMsg input {
  height: 1rem;
  margin-top: 1rem;
}

#emType {
  margin-left: 5.5rem;
}

#contact {
  margin-left: 2rem;
}

#residence {
  margin-bottom: 1rem;
}

#salaryIn {
  width: 3rem;
  margin-left: -1rem;
  margin-right: 0.5rem;
}

#salary {
  margin-left: 4.4rem;
}

/*
我的状态 */
#myStatus {
  padding: 0;
  margin: 0;
  text-align: start;
  margin-top: 2rem;
}

#myStatus #statusTitle {
  margin-left: 3rem;
  font-size: 1.2rem;
  font-weight: 700;
}

#statusRight {
  display: inline-block;
  height: 3rem;
  width: auto;
  overflow: hidden;
  background-color: aqua;
  margin: 0 auto;
  margin-bottom: 0;
  margin-left: 9rem;
}

#statusRight img {}

#msgStatus {
  margin-left: 1rem;
  font-weight: 600;
}

#private {
  margin-left: 42rem;
  font-weight: 500;
  display: inline-block;
  padding-right: 1rem;
  margin-bottom: 2rem;
}

::v-deep .el-cascader .el-input {
  display: flex;
  cursor: pointer;
  border: 1px solid black;
}

::v-deep .el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: 0;
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}

#areaStyle {
  width: 15rem;
  margin-left: 0.1rem;
  height: 1.3rem !important;
  vertical-align: inherit;
}

::v-deep .el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
}

#topContent {
  margin: 0;
  padding: 0;
  text-align: left;
}

#topContent label {
  font-size: 1.1rem;
  margin-top: 1rem;
}

.hr {
  position: absolute;
  left: 2rem;
  width: 55rem;
}

/* 备注 */
input::input-placeholder {
  color: rgba(63, 55, 55, 0.3);
}

textarea {
  resize: none;
  width: 84%;
  height: 6rem;
  border: none;
  /* outline: none; */
  color: rgb(30, 23, 23) !important;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  margin-top: -1rem;
  /* border: none; */
  margin-left: 6.3rem;
  margin-bottom: 1rem;
  background-color: rgba(239, 239, 239, 0.3);
  font-size: 1rem;
}

/* 状态图片 */
#statusImg {
  margin: 0;
  padding: 0;
  width: 3%;
  height: auto;
}

/* 订单头部 */
.orderId {
  width: 18rem;
  text-align: left;
  padding: 0.2rem;
  display: inline-block;
}

/* 雇主 */
#employer {
  margin-right: 2.2rem;
}

.rightSpan {
  margin-left: 3.5rem;
  text-align: start;
}

/*
总价 */
#totalPrice {
  margin-right: 2.5rem;
  margin-left: 0rem;
  vertical-align: revert;
}

#priceIn {
  width: 52rem !important;
  height: 4rem !important;
}

/* 备注 */
#note {
  position: relative;
  top: 0rem;
  left: 0.2rem;
}

#statusSpan {
  vertical-align: text-bottom;
  margin-left: 0.3rem;
}

/* 按钮 */
.firstBotton {
  margin-left: 38rem;
}

input[type="button"] {
  margin-top: 0.2rem;
  background-color: #409eff;
  width: 6rem;
  height: 2rem !important;
  border-radius: 1rem;
  display: inline-block;
  right: 2rem;
  border: none;
  margin-right: 1rem;
  color: white;
  letter-spacing: 0.3rem;
  cursor: pointer;
  margin-bottom: 0.7rem;
  font-weight: 500;
}

.secondBotton {
  background-color: white !important;
  border: 1px solid black !important;
  color: black !important;
}

.commentButton {
  margin-left: 45rem;
}

.refund {
  margin-left: 45rem;
}

.tophr {
  margin-bottom: 1rem;
}

/* 支付 */
#alipayImg {
  width: 8rem;
  height: auto;
  display: inline-block;
}

input[type="radio"] {
  vertical-align: middle;
  margin-left: 1.5rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -2rem;
  margin-right: 0.5rem;
}

input[type="button"] {
  width: 7rem;
  height: 2.5rem !important;
  border-radius: 3.5rem;
  color: white;
  background-color: #52a7f8;
  border: none;
  margin-left: 47rem;
  font-size: 1.2rem;
  padding: 0;
  margin-bottom: 1rem;
}
</style>
